<style lang="scss">
  .ds-list {
    width: 100%;
    margin-top: 20px;
    border: 1px solid #eee;
    border-bottom: 0;

  tr > td:first-child, tr > th:first-child {
    padding-left: 14px;
  }

  tbody {
    cursor: pointer;
  }

  }

  .ds-table-list {
    border: 1px solid #ccc;
    overflow: hidden;
    border-radius: 4px;

  .list-item {
    padding: 7px 20px;
    border-bottom: 1px solid #ccc;
    background: #fff;

  &
  :nth-child(2n) {
    background: #f5f5f5;
  }

  &
  :last-child {
    border-bottom: 0;
  }

  }
  }
</style>
<template>
  <div>
    <div class="container" style="padding-top:20px;">
      <h3 class="clearfix">
        项目列表
        <span class="pull-right">
          <el-button @click="add()" size="small">增加</el-button>
        </span>
      </h3>

      <el-table
        :data="projectList" class="ds-list" @row-click="goProject">
        <el-table-column
          label="名称"
          prop="title">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click.stop.prevent="edit(scope.row)">修改</el-button>
            <el-button type="text" size="small" @click.stop.prevent="doDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <page-right :show="showRight" @right-close="resetRightBox">
      <edit-form :formItem="form"
                 @close="showRight=false"
                 @change="itemChange"></edit-form>
    </page-right>
  </div>
</template>

<script>
  import editForm from './form/form.vue';
  import {project} from '@/resources';

  export default {
    components: {editForm},
    data() {
      return {
        currentDate: this.$moment().format('YYYY-MM-DD HH:mm:ss'),
        menu: [],
        showRight: false,
        action: 'add',
        form: {},
        projectList: []

      };
    },
    computed: {
      pathUrl: function () {
        let path = this.$route.path;
        return path.substr(0, path.lastIndexOf('/') + 1);
      }
    },
    methods: {
      resetRightBox() {
        this.showRight = false;
      },
      itemChange: function (item) {
        if (item.id) {
          project.update(item.id, item).then(res => {
            this.getProjectList();
          });
        } else {
          project.save(item).then(res => {
            this.getProjectList();
          });
        }
        this.showRight = false;
      },
      goProject(item) {
        this.$router.push({
          path: '/project/' + item.id + '/charts'
        });

      },
      add() {
        if (this.action !== 'add') {
          this.form = {};
        }
        this.action = 'add';
        this.showRight = true;
      },
      edit(item) {
        this.action = 'edit';
        this.form = item;
        this.showRight = true;
      },
      doDel(item) {
        this.$confirm('是否确认删除', '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          project.delete(item.id).then(res => {
            this.projectList.splice(this.projectList.indexOf(item), 1);

          });
          // this.$emit('removed', this.item);
        });
      },
      getProjectList() {
        project.query().then(res => {
          this.projectList = res.data.data;
        });
      }
    },
    mounted() {
      this.getProjectList();
    }
  };

</script>
